<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/font/iconfont.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <title>交易比较</title>

</head>

<style>

    /*table tbody {*/
        /*display:block;*/
        /*height:500px;*/
        /*overflow-y:scroll;*/
    /*}*/
    /*table thead, tbody tr {*/
        /*display:table;*/
        /*width:100%;*/
        /*table-layout:fixed;*/
    /*}*/

    /*table thead {*/
        /*width: calc( 100% - 1em )*/
    /*}*/
</style>
<!--<body background="/static/img/bg.png" style=" background-repeat:no-repeat ;-->
<!--background-size:100% 100%;-->
<!--background-attachment: fixed;height: 100%;display:flex;justify-content:center;align-items:center;">-->

<body style="height: 100%;padding:20px">

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>虚拟货币BTC实时报价</legend>
</fieldset>

<blockquote class="layui-elem-quote">
    <button class="layui-btn" style=" margin-left: 20px" onclick="loadData()">实时更新</button>
    <!--<button class="layui-btn" style=" margin-left: 20px" onclick="update()">30s更新</button>-->
    <button class="layui-btn" style=" margin-left: 20px" onclick="setIsPercent(true)">利润比优先</button>
    <button class="layui-btn" style=" margin-left: 20px" onclick="setIsPercent(false)">交易量优先</button>
</blockquote>

<div >
    <table class="layui-table" id="test" >
    </table>
</div>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/static/layui/layui.js"></script>
<script>
  var $, layer, isPercent;
  layui.use('layer', function () {
    $ = layui.jquery;
    layer = layui.layer;
    isPercent = true;
    loadData();
    var t1 = window.setInterval(loadData, 10000);
  });

  function setIsPercent(bool) {
    isPercent = bool;
    loadData();
  }

  function comparePercent(a, b) {
    return b['percent'] - a['percent'];
  }

  function compareVolume(a, b) {
    return b['bBaseVolume'] - a['bBaseVolume'];
  }

  function loadData() {
    $.get('/compare/list'+ "?x-tm-token="
      + localStorage.tmToken, function (res) {
      if (res.data) {
        var arr = [];
        for (var item in res.data) {
          arr.push(res.data[item]);
        }
        if (isPercent) {
          arr.sort(comparePercent);
        }else {
          arr.sort(compareVolume);
        }
        if (arr.length > 0) {
          updateTable(arr);
        }
      }
    });
  }

  function updateTable(arr) {
    var html = '<thead><tr> <td width="50px">编号</td> <td>币名(Coin)</td><td>Bittrex(B网)-(BTC)价</td><td>Bittrex(B网)交易量(BTC)</td>' +
      '<td>Gate(G网)-(BTC)价</td><td>Gate(G网)交易量(BTC)</td><td>Cryptopia(C网)-(BTC)价</td><td>Cryptopia(C网)交易量(BTC)</td><td>建议</td></tr></thead>';
    html+='<tbody>';
    for (var i = 0; i < arr.length; i++) {
      html += '<tr> <td width="50px">' + (i + 1) + '</td>';
      html += '<td>' + arr[i].market + '</td>';
      html += '<td>' + arr[i].bMarket_last + '</td>';
      html += '<td>' + arr[i].bBaseVolume + '</td>';
      html += '<td>' + arr[i].gMarket_last + '</td>';
      html += '<td>' + arr[i].gBaseVolume + '</td>';
      html += '<td>' + arr[i].pMarket_last + '</td>';
      html += '<td>' + arr[i].pBaseVolume + '</td>';
      html += '<td>' + arr[i].suggest +' <font color="red"> ' + arr[i].percent + '% </font></td></tr>';
    }
    html+='</tbody>';
    $('#test').html(html);
  }

</script>
</body>
</html>